<template>
    <div style="height:100%;width:100%;position:relative;">
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="''" :visible.sync="dialogTableVisible" @close="popcommonclose" v-if="dialogTableVisible" ref="popcommondialog">
            <rm-pop-common @cancel="dialogTableVisible=false,popcommonclose()" :datatype="popdatatype" :rptunitid="searchobj.librid" @change="popchange" ref="popcommonLeft"></rm-pop-common>
        </el-dialog>
         <!-- <el-dialog v-el-drag-dialog :append-to-body="true"  title="" :visible.sync="dialogLendVisible" width="25%">
        <span>{{lending}}</span>
        <span slot="footer" class="dialog-footer">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </span>
        </el-dialog> -->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="" :visible.sync="dialogLendVisible" width="25%"  >
        <table style="height:10%">
            <tr></tr>
        </table>
        <div class="loading"><div><span></span></div><div><span></span></div><div><span></span></div></div>
        <table style="height:15%">
            <tr></tr>
        </table>
          <table>
            <tr></tr>
        </table>
         <table>
            <tr></tr>
        </table>
        <div  style="text-align:center;font-family:'microsoft yahei';color:black">
            {{lending}}
        </div>
     
        </el-dialog>
        <el-dialog v-el-drag-dialog :append-to-body="true" :center='true' width='25%' :close-on-click-modal="false" title="用户登录" :visible.sync="dialogLoginVisible" v-if="dialogLoginVisible" @close="userpwd=''">
             <el-form :model="searchobj" :rules="rules"  ref="searchobj" autocomplete="off"  class="demo-ruleForm">
            <table style="border:1px solid #eee;width:100%;padding-top:0px;">
                
                <tr>
                    <td align='right'>用户代码</td>
                    <td>
                        <el-input v-model="usercode" disabled></el-input>
                    </td>
                </tr>
                <tr>
                    <td align='right'>登录者姓名</td>
                    <td>
                        <el-input v-model="username" disabled></el-input>
                    </td>
                </tr>
                <tr>
                    <td align='right'>密码</td>
                    <td>
                        <el-input placeholder="请输入密码" v-model="userpwd" show-password autocomplete="off" ref="loginpwd"></el-input>
                    </td>
                </tr>
                <tr>
                    
                <td align="right">借出原因</td>
                <td >
                    <el-form-item   prop="lendCause">
                            <el-input type="textarea"  rows="3"  :maxlength='128' v-model.trim="searchobj.lendCause" placeholder="" ></el-input>
                    </el-form-item>
                </td>
                </tr> 
            </table>
            </el-form>
            <div style="text-align:center;margin-top:0px">
                <span style="text-align: center;" slot="footer">
                    <el-button @click="LoginChange('searchobj')">借出</el-button>
                    <el-button @click="LoginCancel()">取消</el-button>
                </span>
            </div>
        </el-dialog>

        <el-dialog :append-to-body="true" top="50px" width="30%" :close-on-click-modal="false" :title="msgTitle" :visible.sync="dialogExport">
            <span>选择结果则导出结果信息，选择明细则导出结果明细信息，选择取消则取消本次导出！</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="IsExport_Click(1)">结果</el-button>
                <el-button @click="IsExport_Click(2)">明细</el-button>
                <el-button @click="dialogExport=false" type="primary" ref="cancelExport">取 消</el-button>
            </div>
        </el-dialog>

        <div class="pagetop" :style="{ height: '40px' }">
        <!-- <div class="pagetop" :style="{ height: OtherShow?'195px':'40px' }"> -->
                    <div style="float:left;width:100%">
            <table style="font-size:12px;float:left;position:absolute;top:3px;width:100%" border="0">
                <tr >
                    <td align="right" style="width:60px">留样条码</td>
                    <td style="width:150px">
                        <el-input  v-model.trim="searchobj.smp_barcode" placeholder="" style="width:150px" ref="rSmp_Barcode"></el-input>
                    </td>
                    <td align="right" style="width:60px">样本来源</td>
                    <td style="width:150px">
                        <el-select v-model="searchobj.sourcetype" placeholder="请选择" style="width:100px">
                            <el-option key="all" label="全部" value="all"></el-option>
                            <el-option key="0" label="科研" value="0"></el-option>
                            <el-option key="1" label="检验" value="1"></el-option>
                        </el-select>
                    </td>
                     <!-- <td align="right"> 冰箱位置</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.start_locationcodeName" placeholder=""  style="width:100px" ref="start_locationcode"   @focus="InputFocus('start_locationcode')" @dblclick.native="inputdblEvent('start_locationcode')" @change="popinputchange($event,'start_locationcode')" ></el-input>
                    </td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.end_locationcodeName" placeholder="" style="width:100px" ref="end_locationcode" @focus="InputFocus('end_locationcode')" @dblclick.native="inputdblEvent('end_locationcode')" @change="popinputchange($event,'end_locationcode')"></el-input>
                    </td> -->

                     <td align="right" style="width:60px">
                         留样日期
                        <!-- <el-checkbox true-label="1" false-label="0" v-model="searchobj.reg_flag">留样日期</el-checkbox> -->
                    </td>
                    <td style="width:120px">
                        <el-date-picker v-model="searchobj.reg_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:120px" :clearable="true" :disabled="searchobj.reg_flag=='0'?true:false">
                        </el-date-picker>
                    </td>
                    <td style="width:120px">
                        <el-date-picker v-model="searchobj.reg_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:120px" :clearable="true" :disabled="searchobj.reg_flag=='0'?true:false"> </el-date-picker>
                    </td>
                    
                    <td style="text-align: right; ">样本库</td>
                    <td style="width:120px">
                    <el-select v-model="searchobj.librid" filterable style="width:130px" @change="LoadSave()" ref="reflibrid"  >
                        <el-option v-for="(item, index) in selSmpLibrary_Options" :key="index" :value="item.librid" :label="item.librname"></el-option>
                    </el-select>
                    </td>
                    <td  colspan="16" align="right">
                   <!-- <td v-show="!OtherShow" colspan="16" align="right"> -->
                        <!-- <el-button icon="el-icon-sort" @click.native="BtnSort()">排序</el-button> -->
                        <el-button style="float:right;;margin-left:10px" icon="el-icon-first-aid-kit" @click="BtnLend('')">借出</el-button>
                        <el-button style="float:right;" icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport()">导出</el-button>
                        <el-button style="float:right;" icon="el-icon-refresh-right" @click="printStyleBtn()">打印</el-button>
                        <el-button style="float:right;" icon="el-icon-close" @click.native="BtnClear()">清除</el-button>
                        <el-button style="float:right;" icon="el-icon-delete" v-has="'PDELETE'" @click="BtnDelete()">删除</el-button>
                        <el-button style="float:right;" icon="el-icon-upload"  @click="printStyleBtn('2')">打印样式</el-button>
                        <el-button style="float:right;" icon="el-icon-search" type="primary" v-has="'PINQUERY'" @click="BtnQuery()">查询</el-button>
                        <!-- <el-link style="float:right;margin-left:10px" :underline="false" @click="BtnOtherShow">{{OtherShow?"收起▲":"展开▼"}}</el-link> -->
                    </td>
                </tr>
                 <!-- <td align="right">病人号</td>
                    <td>
                        <el-input v-model.trim="searchobj.patno" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    <td align="right">病人姓名</td>
                    <td>
                        <el-input v-model.trim="searchobj.patname" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td> -->
                <!-- <tr v-show="OtherShow">
                    <td align="right" style="width:60px">
                        <el-checkbox true-label="1" false-label="0" v-model="searchobj.reg_flag">留样日期</el-checkbox>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.reg_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.reg_flag=='0'?true:false">
                        </el-date-picker>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.reg_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.reg_flag=='0'?true:false"> </el-date-picker>
                    </td> -->

                     <!-- <td align="right"> 样本架号</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.shelf_startno" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.shelf_endno" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    <td align="right" style="width:100px;color:red;">病人类型</td>
                    <td>
                        <rm-ddl-common datatype="seccode" kindno="PT" dataname="病人类型" v-model="searchobj.pattype" width="100%" style="max-width:100px"></rm-ddl-common>
                    </td>
                    <td align="right">病人号</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.patno" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                     <td align="right">性别</td>
                    <td style="width:100px" colspan="6">
                        <el-input v-model.trim="searchobj.pat_sex" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td> -->
                   
                <!-- </tr> -->
                <!-- <tr v-show="OtherShow">
                    <td align="right" style="width:60px">
                        <el-checkbox true-label="1" false-label="0" v-model="searchobj.lend_flag">借出日期</el-checkbox>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.lend_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.lend_flag=='0'?true:false">
                        </el-date-picker>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.lend_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.lend_flag=='0'?true:false"> </el-date-picker>
                    </td>

                    <td align="right" style="color:red;">送检医院</td>
                    <td colspan="2" style="width:220px">
                        <rm-ddl-common datatype="hospital" dataname="医院" v-model="searchobj.hospitalcode" width="100%" style="max-width:218px"></rm-ddl-common>
                    </td>

                    <td align="right"> 借出人</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.lenduser" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                   
                    
                    <td align="right"  style="color:blue;"> 借出次数</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.lendtime" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                     
                     <td align="right" style="color:blue;">年龄</td>
                    <td style="width:100px" colspan="6">
                        <el-input v-model.trim="searchobj.pat_ageyear" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                </tr> -->
                <!-- <tr v-show="OtherShow">
                    <td align="right" style="width:60px">
                        <el-checkbox true-label="1" false-label="0" v-model="searchobj.out_flag">销毁日期</el-checkbox>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.out_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.out_flag=='0'?true:false">
                        </el-date-picker>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.out_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.out_flag=='0'?true:false"> </el-date-picker>
                    </td>
                    <td align="right" style="color:red;">申请科室</td>
                    <td colspan="2">
                        <rm-ddl-common datatype="dept" dataname="科室" v-model="searchobj.reqdeptno" width="100%" style="max-width:218px"></rm-ddl-common>
                    </td>

                    <td align="right"> 销毁人</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.outuser" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    
                    <td align="right" style="width:100px"> 在库状态</td>
                    <td >
                        <el-input v-model.trim="searchobj.status" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    <td align="right" style="width:100px">临床诊断</td>
                    <td colspan="6">
                        <el-input style="width:100%;max-width: 100px;" v-model="searchobj.patdiag"></el-input>
                    </td>
                   
                </tr> -->
                <!-- <tr v-show="OtherShow">
                    <td align="right" style="width:60px">
                        <el-checkbox true-label="1" false-label="0" v-model="searchobj.in_flag">入库日期</el-checkbox>
                    </td>
                    <td style="width:100px">
                        <el-date-picker v-model="searchobj.in_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.in_flag=='0'?true:false">
                        </el-date-picker>
                    </td>
                    <td align="left" style="width:100px">
                        <el-date-picker v-model="searchobj.in_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;max-width:100px" :clearable="false" :disabled="searchobj.in_flag=='0'?true:false"> </el-date-picker>
                    </td>
                    <td align="right" style="color:red;">标本类型</td>
                    <td colspan="2">
                        <rm-ddl-common ref="ddlspecimen" datatype="specimen" dataname="标本类型" v-model="searchobj.specimencode" width="100%" style="max-width:218px"></rm-ddl-common>
                    </td>
                    <td align="right"> 入库人</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.inuser" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                    <td align="right">就诊卡号</td>
                    <td style="width:100px">
                        <el-input v-model.trim="searchobj.pat_cardno" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                     
                    <td align="right">标本备注</td>
                    <td style="width:100px" colspan="6">
                        <el-input v-model="searchobj.smp_comments" placeholder="" style="width:100%;max-width:100px"></el-input>
                    </td>
                   
                </tr> -->
                <!-- <el-button icon="el-icon-sort" @click.native="BtnSort()">排序</el-button> -->
                <!-- <tr v-show="OtherShow">
                    <td colspan="3"><td>
                    <td colspan="16" align="right">
                        <el-button style="float:right;margin-left:10px" icon="el-icon-first-aid-kit" @click="BtnLend()">借出</el-button>
                        <el-button style="float:right" icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport()">导出</el-button>
                        <el-button style="float:right" icon="el-icon-refresh-right" @click="BtnPrint()">打印</el-button>
                        <el-button style="float:right" icon="el-icon-close" @click.native="BtnClear()">清除</el-button>
                        <el-button style="float:right" icon="el-icon-delete" v-has="'PDELETE'" @click="BtnDelete()">删除</el-button>
                        <el-button style="float:right" icon="el-icon-upload" @click="BtnQuery()">打印样式</el-button>
                        <el-button style="float:right" icon="el-icon-search" type="primary" v-has="'PINQUERY'" @click="BtnQuery()">查询</el-button>
                        <el-link style="float:right;margin-left:10px" :underline="false" @click="BtnOtherShow">{{OtherShow?"收起▲":"展开▼"}}</el-link>
                    </td>
                </tr> -->
                    
            </table>
            </div>
        </div>
        <div class="pagecenter" :style="{ top: OtherShow?'55px':'55px'}">
        <!-- <div class="pagecenter" :style="{ top: OtherShow?'200px':'55px'}"> -->
            <div :class="'pagemain'">
            <!-- <vxe-table :style="{ height: OtherShow?'100%'-100+ 'px':'100%'}"  row-id='smp_sampleid'  -->
            <vxe-table row-id='smp_sampleid' 
            :select-config="{checkRowKeys:rowSmpIDArr,showHeader:true,reserve:true,trigger:'cell'}" :data.sync="leftTableData" border fit 
             height="auto" header-align="center" highlight-current-row highlight-hover-row ref="xTable" 
             resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe @select-change="selectChange" @select-all="selectChangeAll"
             :cell-class-name="CellClassName" @current-change="CurrentChangeEvent" :start-index="(tablePage.currentPage - 1) * tablePage.pageSize">
                <vxe-table-column type="selection" header-align="center" align="center"  width="40px" ></vxe-table-column>
                <vxe-table-column field="smp_registerdate" title="留样日期" width="120px"></vxe-table-column>
                <vxe-table-column field="smp_type" title="标本类型" width="100px"></vxe-table-column>
                <vxe-table-column field="smp_barcode" title="条码号" width="100px"></vxe-table-column>
                <vxe-table-column field="smp_status" title="状态" width="80px" :formatter="['formatSelect', $opt.smpSampleOption]" ></vxe-table-column>
                <vxe-table-column field="locationname" title="样本位置" width="150px"></vxe-table-column>
                <vxe-table-column field="posinrow" title="行号" width="60px"></vxe-table-column>
                <vxe-table-column field="posincol" title="列号" width="60px"></vxe-table-column>
                <vxe-table-column field="locationcode" title="位置编码" width="100px"></vxe-table-column>
                <vxe-table-column field="smp_comments" title="标本备注" width="200px"></vxe-table-column>
                <vxe-table-column field="sourcetype" title="样本来源" width="100px" :formatter="formatFun"></vxe-table-column>
                <!-- <vxe-table-column field="preoutdate" title="预计销毁时间" width="120px"></vxe-table-column> -->
                <vxe-table-column field="indate" title="最后入库日期" width="120px"></vxe-table-column>
                <vxe-table-column field="inuser" title="入库人" width="100px"></vxe-table-column>
                <vxe-table-column field="lenddate" title="最后借出日期" width="120px"></vxe-table-column>
                <vxe-table-column field="lenduser" title="借出人" width="100px"></vxe-table-column>
                <!-- <vxe-table-column field="finishdate" title="销毁日期" width="120px"></vxe-table-column>
                <vxe-table-column field="finishuser" title="销毁人" width="100px"></vxe-table-column> -->
                <vxe-table-column field="lendtime" title="借出次数" width="120px"></vxe-table-column>
                <vxe-table-column field="hospitalcode" title="送检医院" width="120px"></vxe-table-column>
                <vxe-table-column field="usestatus" title="申请单ID" width="120px"></vxe-table-column>
                <vxe-table-column field="usestatus" title="条码生成时间" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_no" title="病人号" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_cardno" title="病人卡号" width="150px"></vxe-table-column>
                <vxe-table-column field="pat_name" title="病人姓名" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_sex" title="性别" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_birth" title="病人生日" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_ageyear" title="病人年龄" width="80px"></vxe-table-column>
                <vxe-table-column field="pat_typecode" title="病人类型" width="80px"></vxe-table-column>
                <vxe-table-column field="req_deptno" title="申请科室" width="150px"></vxe-table-column>
                <vxe-table-column field="pat_diag" title="临床诊断" width="180px"></vxe-table-column>
                <vxe-table-column field="pat_address" title="联系地址" width="250px"></vxe-table-column>
                <vxe-table-column field="pat_nation" title="国家/民族" width="120px"></vxe-table-column>
                <vxe-table-column field="pat_idcardno" title="身份证号" width="220px"></vxe-table-column>
                <vxe-table-column field="pat_phone" title="联系电话" width="150px"></vxe-table-column>
                <!-- <vxe-table-column field="pat_height" title="身高" width="100px"></vxe-table-column>
                <vxe-table-column field="weight" title="体重" width="100px"></vxe-table-column>
                <vxe-table-column field="abo_bldtype" title="ABO血型" width="80px"></vxe-table-column>
                <vxe-table-column field="rh_bldtype" title="RH血型" width="80px"></vxe-table-column> -->
                <vxe-table-column field="shelfno" title="标本架编号" width="100px"></vxe-table-column>
                <vxe-table-column field="shelfposdesc" title="标本架位置" width="200px"></vxe-table-column>
                <vxe-table-column field="smp_sampleid" title="样本ID" width="40px"></vxe-table-column>
            </vxe-table>
             </div>
            <div class="pagebottom">
                <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.total" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
                </vxe-pager>
            </div>
        </div>
        
    </div>
</template>

<script type="text/javascript">
import { Promise } from "q";
import { invalid } from "moment";
import XE from "xe-utils"; //引入工具类
import md5 from "js-md5";  //加密
XE.mixin({
    // 自定义全局的格式化处理函数
    formatSelect(cellValue, list) {
        let item = list.find((item) => item.value == cellValue);
        return item ? item.label : "";
    },
});
export default {
    name: "SMP221",
    data() {
        return {
            //top
            dialogExport: false, //导出页面弹窗1.结果信息/2.明细信息/3.取消
            searchobj: {
                librid: "",
                smp_barcode: "",
                start_locationcode: "",
                end_locationcode: "",
                start_locationcodeName: "",
                end_locationcodeName: "",
                pat_no: "",
                patname: "",
                reg_flag: "1",
                reg_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //留样日期-起始
                reg_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //留样日期-结束
                shelf_startno: "",
                shelf_endno: "",
                pat_cardno: "", //就诊卡号
                pat_sex: "",
                lend_flag: "0",
                lend_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //借出日期-起始
                lend_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //借出日期-结束
                lenduser: "", //借出人
                lendtime: "", //借出次数 默认是0，每次借出后自动加1
                reqdeptno: "",
                pat_ageyear: "", //年龄
                out_flag: "0",
                out_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //销毁日期-起始
                out_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //销毁日期-结束
                outuser: "", //销毁人
                status: "", //在库状态 打印/在库/借出/销毁
                patdiag: "",
                pattype: "",
                in_flag: "0",
                in_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //入库期-起始
                in_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //入库日期-结束
                inuser: "", //入库人
                smp_comments: "", //标本备注
                hospitalcode: "",
                specimencode: "",
                lendCause:"", //借出原因
            },
            rules: {
                lendCause: [
                    { required: true, message: '请输入借出原因!', trigger: 'blur' },
                ]
            },
            msgTitle: "提示",
            bLoading: false,
            bbjlx_Data: [],
            tableData: [],
            tempindex: 0,
            leftTableData: [],
            msgList: [],
            selSmpLibrary_Options: [], //样本库类型
            dialogTableVisible: false, //是否显示冰箱位置弹框
            InputCodeArr:[],           //DDL 缓存
            popdatatype:"smp_LocationCode",    //弹窗类型缓存
            OtherShow: false,          //展开
            /**登录框变量 */
            usercode: "", //登录用户名
            username: "", //登录用户显示名
            userpwd: "", //登录密码
            dialogLoginVisible:false, //登陆弹窗
            /**借出弹框 */
            dialogLendVisible:false,//借出弹框
            lending:'借出中请勿关闭！', //销毁弹框提示
            LendData: [], //行颜色ID
            tablePage: {               //分页
                total: 0,
                currentPage: 1,
                pageSize: 50
            },
            bindLeftTableData:[],        //分页查询缓存
            rowSmpIDArr:[],              //全选绑定ID
            rowSelect:[],
            allDestroy:false,            //是否全部销毁
            lendPager:false,          //借出分页
        };
    },
    created() {
        //获取当前用户登录名称
        this.username = this.$tool.getSession(this.$tool.loginusername);
        this.ddlSmp_Library(); //初始化样本库列表
       
    },
    mounted() {
        let modOption = localStorage.getItem("libridList");
        let tempOption = JSON.parse(modOption);
        if (modOption) {
            this.searchobj.librid = tempOption.librid;
        }
        this.$refs.rSmp_Barcode.focus();
    },
    updated() {},
    methods: {
        ddlSmp_Library() {
            this.$tool
                .request({
                    url: "SMP/SMP1/SMP130",
                    method: "post",
                    data: {
                        action: "q_smp_library",
                        //islibrtype: "1",
                    },
                })
                .then((res) => {
                    this.selSmpLibrary_Options = res;
                    console.log("res", res);
                    if (this.selSmpLibrary_Options.length > 0)
                    {
                         this.searchobj.librid = this.selSmpLibrary_Options[0].librid;
                         this.initLoginDialog();//加载登录信息
                    }
                });
        },
        async BtnQuery() {
            console.log(this.$refs.xTable);
            if (this.searchobj.reg_flag == "0" && this.searchobj.lend_flag == "0" && this.searchobj.out_flag == "0" && this.searchobj.in_flag == "0") {
                this.$alert("请先选择查询日期。", "提示", {
                    confirmButtonText: "确定",
                    type: "error",
                });
                return false;
            }
            try {
                this.allDestroy = false;    //是否销毁
                this.rowSmpIDArr = [];      //勾选ID数组(销毁行有勾选无ID不勾选)
                this.rowSelect = [];        //勾选行数据(销毁行数据)
                this.$refs.xTable.setAllSelection(false);//勾选UI
                this.lendPager = false;

                const res = await this.$tool.request({
                    url: "SMP/SMP2/SMP221",
                    method: "post",
                    timeout: 600000,
                    data: {
                        action: "smp_query_samplelist",
                        ...this.searchobj,
                        pagesize: this.tablePage.pageSize,
                        currentpage: this.tablePage.currentPage
                    },
                });
                if (res.flag == 1) {
                    this.tablePage.total = res.RData.total;
                    this.bindLeftTableData = res.RData.Data;
                    //this.leftTableData =  res.RData.Data;
                    let tempdata = this.bindLeftTableData;
                    this.rowSelect = [];
                    this.leftTableData = [];
                    for (let index = 0; index < tempdata.length; index++) {
                        if (index>=this.tablePage.pageSize * (this.tablePage.currentPage - 1) && index<this.tablePage.pageSize * this.tablePage.currentPage) {
                            const element = tempdata[index];
                            this.leftTableData.push(element);
                        }
                    }
                  
                } else if (res.flag == -1) {
                    this.$alert(res.msg, "提示", {
                        confirmButtonText: "确定",
                        type: "error",
                    });
                }
            } catch (e) {
                this.$message.warning(e);
            }
        },
        formatFun({ cellValue, column, row }) {
            if (["pat_sourcetype"].includes(column.property)) {
                try {
                    if(cellValue ==="1"){
                        return "本院"
                    }else if(cellValue === "2"){
                        return "外院"
                    }else{
                        return cellValue
                    } 
                } catch {}
            }else if(["sourcetype"].includes(column.property)){
                try {
                    if(cellValue ==="0"){
                        return "科研"
                    }else if(cellValue === "1"){
                        return "检验"
                    }else{
                        return cellValue
                    } 
                } catch {}
            } else {
                return cellValue
            }
        },
        BtnDelete() {
            //删除选中的所有行
            let delSmpID = this.$refs.xTable.getSelectRecords();
            // for (let selectindex = 0; selectindex < delSmpID.length; selectindex++) {
            //     const selectelement = delSmpID[selectindex];
            //    for (let indexDel = 0; indexDel < array.length; indexDel++) {
            //        const elementDel = array[indexDel];
                   
            //    }
            // }
            this.$refs.xTable.remove(delSmpID);
            for (let index = 0; index < delSmpID.length; index++) {
                const delelement = delSmpID[index];
                for (let index = 0; index < this.rowSelect.length; index++) {
                    const element = this.rowSelect[index];
                    if (element['smp_sampleid']==delelement['smp_sampleid']) {
                        this.rowSelect.splice(index,1);
                        index--;
                    }
                }
            }
        },
        BtnSort() {},
        BtnClear() {
            this.searchobj = {
                smp_barcode: "",
                start_locationcode: "",
                end_locationcode: "",
                start_locationcodeName: "",
                end_locationcodeName: "",
                pat_no: "",
                patname: "",
                reg_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //留样日期-起始
                reg_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //留样日期-结束
                shelf_startno: "",
                shelf_endno: "",
                pat_cardno: "", //就诊卡号
                pat_sex: "",
                lend_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //借出日期-起始
                lend_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //借出日期-结束
                lenduser: "", //借出人
                lendtime: "", //借出次数 默认是0，每次借出后自动加1
                reqdeptno: "",
                pat_ageyear: "", //年龄
                out_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //销毁日期-起始
                out_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //销毁日期-结束
                outuser: "", //销毁人
                status: "", //在库状态 打印/在库/借出/销毁
                patdiag: "",
                pattype: "",
                in_startdt: XE.toDateString(XE.getWhatDay(new Date(), -7), "yyyy-MM-dd"), //入库日期-起始
                in_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"), //入库日期-结束
                inuser: "", //入库人
                smp_comments: "", //标本备注
                hospitalcode: "",
                specimencode: "",
            };
            this.$nextTick(() => {
                this.allDestroy = false;    //是否销毁
                this.rowSmpIDArr = [];      //勾选ID数组(销毁行有勾选无ID不勾选)
                this.rowSelect = [];        //勾选行数据(销毁行数据)
                this.$refs.xTable.setAllSelection(false);//勾选UI
                this.leftTableData = [];    //清除table
                this.tablePage.total = 0;   //分页清除
                this.tablePage.currentPage =1;                //分页清除
                this.$refs.rSmp_Barcode.focus();
            });
        },
        LoadSave() {
            let jsondata = { librid: this.searchobj.librid };
            let modListJson = JSON.stringify(jsondata);
            localStorage.setItem("libridList", modListJson);
            // this.$nextTick(() => {
            //     this.InitPage()
            // })
        },
        BtnPrint() {
            var sql = "";
            sql = btoa(encodeURIComponent(sql));
            jsObj.PrintCustomReport("5002", sql, "lis", "req_master", ""); //*
        },
        BtnExport() {
            this.dialogExport = true;
            this.$nextTick(() => {
                this.$refs.cancelExport.$el.focus();
            });
        },
        IsExport_Click(e) {
            if (e == 1) {
                let options = {
                    filename: "SMP221 标本出库-结果信息.csv",
                };
                this.$refs.xTable.exportCsv(options);
            } else if (e == 2) {
                let options = {
                    filename: "SMP221 标本出库-明细信息.csv",
                };
                this.$refs.xTable.exportCsv(options);
            }
            this.dialogExport = false;
        },
        BtnLend() {
             //let rload;
            let tempSampledata;
            //获取所有借出数据(本页面变量名抄袭SMP226请谅解)
            if (this.allDestroy) 
            {
                tempSampledata = this.bindLeftTableData;
                this.rowSelect = tempSampledata;
            }
            else
                tempSampledata = this.rowSelect;
             //需要借出的样本ID
            let smpId="";
            for (let index = 0; index < tempSampledata.length; index++) {
                const element = tempSampledata[index];
                if (element['smp_status']=='40') 
                continue;
                if (index==tempSampledata.length-1) {
                    smpId +=element['smp_sampleid']

                }
                else
                    smpId +=element['smp_sampleid']+',';
            }
            if (!smpId) {
                 this.$message.error("请添加借出数据！");
                 return;
            }
            this.popdatatype = 'LIS3_report_user';
            this.dialogTableVisible = true;
        },
        CurrentChangeEvent({ row, rowIndex }) {
            this.tempindex = rowIndex;
        },
        CellClassName({ rowIndex, row }) {
             if (this.LendData&&this.lendPager) {
                 return "colgreen";
            }
        },
        //弹出框关闭时自动保存
        popcommonclose() {
            var typecol = (this.popdatatype + "").replace("SMP221_", "");
            if (this.$refs[typecol]) {
                this.searchobj[typecol] ='';
                this.searchobj[typecol+'Name'] ='';
                this.$refs[typecol].select();
            }
        },

        //公共组件change事件
        popchange(c, v, row) {
            if (this.popdatatype != "LIS3_report_user" && this.popdatatype != "LIS3_rechk_user") {
                // if (this.popdatatype =='start_locationcode') {//start_locationcode
                    
                // }
                var colcode = this.popdatatype.replace("LIS3_", "");
                this.searchobj[colcode] = c;
                this.searchobj[colcode + "Name"] = v;
                this.dialogTableVisible = false;
                this.$refs[colcode].select();
            } else {
                this.usercode = c;
                this.username = v;
                this.userpwd = "";
                this.dialogLoginVisible = true;
                this.dialogTableVisible = false;
            }
        },

            //查询冰箱
        ddlLocationCode(thisUrl,thisData){
            if (this.InputCodeArr.filter(item => item.key == this.popdatatype).length == 0) {
            this.$tool
                    .request({
                        url: thisUrl,
                        method: "post",
                        data: thisData
                    })
                    .then(res => {
                        if (res) {
                            if (res!='请选择样本库！') {
                                this.InputCodeArr.push({ key: this.popdatatype, list: res });
                            }
                            else  {
                                this.$alter(res);
                            }
                        }
                    })    
            }                          

        },
        //初始化借出系统弹窗
        initLoginDialog()
        {
            this.$nextTick(()=>{
                this.popdatatype =  'LIS3_report_user'; //LIS3_report_user
                this.ddlLocationCode("ucent/ddl",{
                    action: 'LIS3_report_user',
                    librid: this.searchobj.librid,
                });
            })
          
        },
        //查询DDL
        InputFocus(colcode) {
            this.popdatatype =  colcode;
            this.ddlLocationCode("ucent/ddl",{
                            action: 'smp_LocationCode',
                            librid: this.searchobj.librid,
                        }); //smp_LocationCode
            console.log(this.$refs[colcode]);
            if (colcode.toUpperCase().indexOf("_DT") == -1 && colcode.toUpperCase().indexOf("_DATE") == -1 && this.$refs[colcode]['type']!='datetime') {
                this.$refs[colcode].select();
            } else {
                this.$refs[colcode].focus();
            }
        },

        //input输入框双击事件
        inputdblEvent(colcode,type) {
            
          this.popdatatype =   'smp_LocationCode';
          this.dialogTableVisible = true;
          this.$nextTick(()=>{
              this.popdatatype =   colcode;
          })
        },

        //Input输入框控件类型为5的change事件
        popinputchange(value, type) {
            switch (type) {
                default:
                    if (value.trim()) {
                        var list = this.InputCodeArr.filter(item => item.key == this.popdatatype);
                        if (list.length > 0) {
                            var row = list[0].list.Data.filter(item => (item.inputcode + "").toUpperCase() == (value + "").toUpperCase() || (item.hidkey + "").toUpperCase() == (value + "").toUpperCase());
                            if (row.length > 0) {
                                this.searchobj[type + "name"] = row[0].hidname;
                                this.searchobj[type] = row[0].hidkey;
                            } else {
                                var re = new RegExp("[\\u4e00-\\u9fa5]", "gi");
                                if (!re.test(value)) {
                                    this.dialogTableVisible = true;
                                }
                            }
                        }
                    } else {
                        this.searchobj[type] = "";
                    }
                    break;
            }
        },

         //展开
        BtnOtherShow() {
        this.OtherShow = !this.OtherShow;
            
        },
        //账号登陆确定事件
        LoginChange(formName) {
           
            this.$refs[formName].validate((valid) => {
            if (valid) {
                var action ="loginuser";
                //后台查询登录判断是否成功
                this.$tool
                    .request({
                        url: "SMP/SMP2/SMP221",
                        method: "post",
                        data: {
                            action: action,
                            userno: this.usercode,
                            pwd: md5("rms-" + this.userpwd + "-rme"),
                        }
                    })
                    .then(res => {
                        if (res.flag > 0) {
                            //成功后续逻辑dialogLoginVisible
                            this.dialogLoginVisible = false;
                            //提示登录成功
                            this.$message({
                                message: this.username+res.msg,
                                type: "success",
                            })
                            let that = this;
                            this.LendSample(that);
                            //借出
                        } else {
                            this.$confirm(res.msg, "错误", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                focusCancelButton: false,
                                closeOnClickModal: false,
                                type: "warning"
                            });
                        }
                    });
            } else {
                console.log('error submit!!');
                return false;
            } });
        },
        //取消账号登录
        LoginCancel() {
            this.dialogLoginVisible = false;
            this.userpwd = "";
        },

        //批量借出
        LendSample()
        {
            //let rload;
            let tempSampledata;
            //获取所有借出数据(本页面变量名抄袭SMP226请谅解)
            if (this.allDestroy) 
            {
                tempSampledata = this.bindLeftTableData;
                this.rowSelect = tempSampledata;
            }
            else
                tempSampledata = this.rowSelect;
             //需要借出的样本ID
            let smpId="";
            for (let index = 0; index < tempSampledata.length; index++) {
                const element = tempSampledata[index];
                if (element['smp_status']=='40') 
                continue;
                if (index==tempSampledata.length-1) {
                    smpId +=element['smp_sampleid']

                }
                else
                    smpId +=element['smp_sampleid']+',';
            }
            if (smpId) {
                this.dialogLendVisible =true;
                // rload = this.$loading({
                //     // 声明一个loading对象
                //     lock: true, // 是否锁屏
                //     text: "正在销毁中,请等待！", // 加载动画的文字
                //     spinner: "el-icon-loading", // 引入的loading图标
                //     background: "rgba(255, 255, 255, 0.3)", // 背景颜色
                //     target: ".sub-main", // 需要遮罩的区域
                //     body: true,
                //     customClass: "mask" // 遮罩层新增类名
                // });
                // setTimeout(function () {
                //     // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
                //     rload.close(); // 关闭遮罩层
                // }, 5000);
                this.$tool.request(
                    {
                        url: "SMP/SMP2/SMP221",
                        method: "post",
                        data: {
                            action: "smp_sample_lend",
                            sampleids:smpId,
                            lenduser:this.usercode,
                            usedesc:this.searchobj.lendCause
                        }
                    }
                )
                .then( res=>
                    {
                        this.LendData =[];
                        if (res) {
                            this.dialogLendVisible =false;
                            //rload.close();
                            this.LendData = res.smpList;
                            if (res.flag == "1") {
                                this.lendPager = true;
                                 this.$message({
                                message: "借出成功!",
                                type: "success",
                            })
                           console.log("开始更新借出数据!",new Date())
                            //销毁行
                            this.leftTableData =this.rowSelect;
                            let xTableNum = this.leftTableData.length;
                            //更新
                            for (let c_index = 0; c_index < this.LendData.length; c_index++) {
                                const ColorElement = this.LendData[c_index];
                                for (let tableIdx = 0; tableIdx < xTableNum; tableIdx++) {
                                    const tabElement = this.leftTableData[tableIdx];
                                    if (tabElement['smp_sampleid']==ColorElement.sampleid) {
                                        //更新样本状态
                                        this.leftTableData[tableIdx]['smp_status'] ='40';
                                        //更新销毁时间
                                        this.leftTableData[tableIdx]['lenddate'] =ColorElement.lenddate;
                                        //更新销毁人
                                        this.leftTableData[tableIdx]['lenduser'] =ColorElement.lenduser;
                                        //更新样本架位置说明
                                        this.leftTableData[tableIdx]['shelfposdesc'] =ColorElement.shelfposdesc;
                                    }
                                }
                            }
                            this.tablePage.total = this.rowSelect.length;
                            this.tablePage.currentPage =1;
                            this.rowSmpIDArr = [];
                            this.$refs.xTable.setAllSelection(false);
                             console.log("更新借出数据结束!",new Date())
                            
                                this.$nextTick(()=>{
                             
                                    console.log('开始更新UI',new Date());
                                    let tempdata = this.rowSelect;
                                    this.leftTableData = [];
                                    let templeftTableData =[];
                                    for (let index = 0; index < tempdata.length; index++) {
                                        if (index>=this.tablePage.pageSize * (this.tablePage.currentPage - 1) && index<this.tablePage.pageSize * this.tablePage.currentPage) {
                                            const element = tempdata[index];
                                            templeftTableData.push(element);
                                        }
                                    }
                                    this.leftTableData =templeftTableData;
                                    
                                 
                                    console.log('更新UI结束',new Date());
                                })
                            }
                            else if (res.flag == "0") 
                                this.$message.error(res.msg);
                            else if (res.flag=='-2') {
                                this.$message.error(res.msg);
                            }
                        }
                        
                            
                        }
                    )
                    .catch(e => {
                      
                        this.dialogLendVisible =false;
                        //loading.close();
                        this.$message.error(e);
                    });
            }
             else
            {
                this.$message.error("请添加借出数据！");
            }
        },
        //分页查询
        // handlePageChange({ currentPage, pageSize }) {
        //     this.tablePage.currentPage = currentPage;
        //     this.tablePage.pageSize = pageSize;
        //     this.BtnQuery();
        // },
        //分页查询假
        handlePageChange({ currentPage, pageSize }) {
           console.log('点击分页',new Date());
            //查询分页
            if (!this.lendPager) {
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                let tempdata = this.bindLeftTableData;
                this.leftTableData = [];
                for (let index = 0; index < tempdata.length; index++) {
                        if (index>=this.tablePage.pageSize * (this.tablePage.currentPage - 1) && index<this.tablePage.pageSize * this.tablePage.currentPage) {
                            const element = tempdata[index];
                            this.leftTableData.push(element);
                        }
                }
            }
            //销毁分页
            else
            {
                console.log('借出分页',new Date())
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                let tempdata = this.rowSelect;
                this.leftTableData = [];
                for (let index = 0; index < tempdata.length; index++) {
                        if (index>=this.tablePage.pageSize * (this.tablePage.currentPage - 1) && index<this.tablePage.pageSize * this.tablePage.currentPage) {
                            const element = tempdata[index];
                            this.leftTableData.push(element);
                        }
                }
                console.log('借出分页结束',new Date())
            }
            // this.BtnQuery();
        },
        //打印样式
        printStyleBtn(index) {
            var that = this;
            let tempData = that.leftTableData;
            if (tempData.length<=0) return false;

            // 打印
            if (typeof jsObj != "undefined") {
                let data = this.$refs.xTable.getTableData().fullData;
                let column = this.$refs.xTable.getTableColumn().tableColumn;
                let columns = this.$pub.InitColumn(column);
                
                if (data.length > 0) {
                    if (index == "2") {
                        const itemtmp = tempData[0];
                        let str = JSON.stringify(columns);
                        str += "\r";
                        str +=  '['+ JSON.stringify(itemtmp)+']';
                        // str += JSON.stringify(this.inoutDetList);
                        let sql = btoa(encodeURIComponent(str));
                        //设计
                        const rload = this.$pub.openLoading(this, "正在打开报表设计器，请稍候……");
                        jsObj.SetCustomJsonPrintConfig("5054", sql, this.userno, "样本借出打印设计");
                        rload.close();
                    } else {
                        //打印
                        for (let item = 0; item < tempData.length; item++) {
                            const itemtmp = tempData[item];
                            //let itemtmp =  Object.assign({},this.OldPatientInfo,item);
                            let str = JSON.stringify(columns);
                            str += "\r";
                            str +=  '['+ JSON.stringify(itemtmp)+']';
                            // str += JSON.stringify(this.inoutDetList);
                            let sql = btoa(encodeURIComponent(str));
                            jsObj.PrintCustomJsonReport("5054", sql, this.userno, "样本借出打印设计", "");
                        }
                            
                    }
                } else {
                    this.$alert("没有获取到数据！", "提示");
                }
            } else {
                this.$alert("请使用" + this.$pub.clientname + "打开！", "提示");
            }
            // function extend(des, src, override) {
            //     if (src instanceof Array) {
            //         for (var i = 0, len = src.length; i < len; i++) extend(des, src[i], override);
            //     }
            //     for (var i in src) {
            //         if (override || !(i in des)) {
            //             des[i] = src[i];
            //         }
            //     }
            //     return des;
            // }
        },

          /**打印标签条码 */
        StartPrintBarcode(cData) {
            if (typeof jsObj != undefined&&typeof jsObj !== 'undefined') {
                let columnRegister = this.$refs.xTable.getTableColumn().tableColumn;
                let columnSample = this.$refs.xTableSample.getTableColumn().tableColumn;
                let columns = this.$pub.InitColumn(columnRegister.concat(columnSample));
                // columns.push({ title: "创建人", property: "createuser" });
                // columns.push({ title: "创建时间", property: "createdt" });
                let strbase = JSON.stringify(columns);
                strbase += "\r";

                for (let item of cData) {
                   let itemtmp =  Object.assign({},this.OldPatientInfo,item);
                    console.log('item :',itemtmp);
                    console.log('JSON.stringify(itemtmp) ：',JSON.stringify(itemtmp));
                    // let str = strbase + JSON.stringify('['+itemtmp+']');
                    let str = strbase +'['+ JSON.stringify(itemtmp)+']';
                    console.log('strbase + JSON.stringify(itemtmp) ：',str);
                    let sql = btoa(encodeURIComponent(str));
                     console.log(this.barcodestyle);
                    jsObj.PrintCustomJsonReport(this.barcodestyle, sql, this.$tool.getSession(this.$tool.loginusername), "样本信息打印", "");
        }
            } else {
                this.$alert("请使用" + this.$pub.clientname + "", "提示");
            }
        },
        //添加勾选记录
        selectChange({selection,checked,row,rowIndex,$rowIndex,column,columnIndex,$columnIndex,cell},event)
        {
            if (checked) {
                this.rowSelect.push(row);
            }
            else{
                let tempdata = this.rowSelect;
                for (let index = 0; index < tempdata.length; index++) {
                    const element = tempdata[index];
                    if (element['smp_sampleid']==row['smp_sampleid']) {
                        this.rowSelect.splice(index,1);
                    }
                }
            }
        },
        //选中所有
        selectChangeAll({selection,checked,row,rowIndex,cell},event)
        {
            if (checked) {
                this.allDestroy = true;
                //rowSmpIDArr
                this.rowSmpIDArr = [];
                let tempdata = this.bindLeftTableData;
                for (let index = 0; index < tempdata.length; index++) {
                    const element = tempdata[index];
                    this.rowSmpIDArr.push(element['smp_sampleid']);
                }
            }
            else {
                this.allDestroy = false;
                this.rowSmpIDArr = [];
            }
        },

    },
};
</script>

<style scoped>
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
    white-space: nowrap;
}
.pagetop {
    width: 100%;
    /* height: 225px; */
    height: 110px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    /* overflow-x: auto; */
    z-index: 99;
}
.pagecenter {
    position: absolute;
    /* top: 230px; */
    /* height: 100%; */
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 405px;
    overflow: auto;
}

.middle-right {
    position: absolute;
    height: 100%;
    width: 400px;
    right: 0px;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
.pagemain {
    position: absolute;
    height: 90%;
    top: 0px;
    left: 0px;
    right: 0px;
    /* overflow: auto; */
    bottom: 40px;
}
.pagebottom {
    position: absolute;
    height: 45px;
    left: 0px;
    right: 0px;
    overflow: visible;
    bottom: 0px;
    z-index: 999;
}

.loading{          
        width: 40px;
        height: 40px;           
        margin: 0 auto;           
        margin-top:0px;    
        position: relative;       
        -webkit-animation: load 3s linear infinite;      
        }      
.loading div{        
        width: 100%;          
        height:100%;         
        position: absolute;       
}     
.loading span{  
    display: inline-block; 
    width: 20px;
    height: 20px;
    border-radius: 50%;         
    background: #99CC66;      
    position: absolute;      
    left: 50%;      
    margin-top: -10px;     
    margin-left: -10px;      
    -webkit-animation: changeBgColor 3s ease infinite;  
}        
@-webkit-keyframes load{           
    0%{                -webkit-transform: rotate(0deg);            }     
    33.3%{                -webkit-transform: rotate(120deg);            }          
    66.6%{                -webkit-transform: rotate(240deg);            }        
    100%{                -webkit-transform: rotate(360deg);            }    
}  
@-webkit-keyframes changeBgColor{
    0%,100%{                background: #99CC66;            }  
    33.3%{                background: #FFFF66;            }      
    66.6%{                background: #FF6666;            }        
}        
.loading div:nth-child(2){
    -webkit-transform: rotate(120deg);        
}        
.loading div:nth-child(3){
     -webkit-transform: rotate(240deg);
}        
.loading div:nth-child(2) span{
    -webkit-animation-delay: 1s;
}        
.loading div:nth-child(3) span{            
    -webkit-animation-delay: 2s;        
}	
/* /deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item
{
    height: 65px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px ;
}

/deep/ .el-form-item__content {
    height: 65px;
    line-height: 32px;
    position: relative;
    font-size: 12px;
} */
::v-deep .colgreen {
    background-color: #00ff00 !important;
}
::v-deep .vxe-table .vxe-body--column.col-orange {
    background-color: #f8f8f8;
}
::v-deep.el-input--suffix .el-input__inner {
    padding-right: 0px;
}
</style>